<template>
  <q-dialog v-model="modalities.isEditing"
            @close="modalities.isEditing = false">
  <q-card class="q-pa-md"
            style="width: 700px; max-width: 80vw; height: 60%">
      <q-item-label class="text-h5">
        {{ 'Редактировать профиль врача' }}
      </q-item-label>
      <q-item style="height: 100%" class="column">
        <q-input v-model="name"
                 :rules="[val => !!val || 'Поле Имя обязательно']"
                 stack-label
                 no-error-icon
                 dense
                 class="q-mt-md content-center"
                 style="width: 100%; border-radius: 4px"
                 label="Имя" />
        <q-input v-model="code"
                 :rules="[val => !!val || 'Поле Код обязательно']"
                 stack-label
                 no-error-icon
                 dense
                 class="q-mt-md content-center"
                 style="width: 100%; border-radius: 4px"
                 type="login"
                 label="Код"/>
        <q-btn class="q-mt-md"
               color="primary"
               style="width: 100%; border-radius: 4px"
               @click="handleEditModality">
          {{ 'Обновить' }}
        </q-btn>
      </q-item>
    </q-card>
  </q-dialog>
</template>

<script setup>

import {computed, defineComponent, reactive, toRaw} from "vue";
import {modalitiesStore} from "stores/modalities-store";
import {authStore} from "stores/auth-store";
import {User} from "src/models/user";

defineComponent({
  name: 'EditDoctorModal'
});

const modalities = modalitiesStore()
const auth = authStore()

const name = computed({
  get() {
    return modalities.editableModality.name
  },
  set(newValue) {
    modalities.editableModality.name = newValue
  }
})

const code = computed({
  get() {
    return modalities.editableModality.code
  },
  set(newValue) {
    modalities.editableModality.code = newValue
  }
})

const handleEditModality = async () => {
  try {
    const payload = {
      name: name.value,
      code: code.value
    }
    await modalities.editModality(payload)
  } catch (err) {
    console.error(err)
  }
}

</script>


<style scoped lang="scss">

</style>
